//
//  Home.swift
//  SwiftUiBaseStudy
//
//  Created by Daniel on 2023/10/12.
//

import SwiftUI

struct Home: View {
    @State var showProfile = false
    @State var viewState = CGSize.zero
    @State var showContent = false
    
    @EnvironmentObject var user:UserStore
    
    var body: some View {
        ZStack {
            //            Color(#colorLiteral(red: 0.8549019608, green: 0.8745098039, blue: 0.9176470588, alpha: 1))
            Color("background2")
                .edgesIgnoringSafeArea(.all)
            
            HomeBackgroundView(showProfile: $showProfile)
                .scaleEffect(showProfile ? 0.9 : 1)
                .rotation3DEffect(
                    Angle(degrees: showProfile ? Double(viewState.height / -10)-10 :0),
                    axis: (x: 10.0, y: 1.0, z: 0.0)
                )
                .offset(y: showProfile ? -450 : 0)
                .animation(.spring(response: 0.5,dampingFraction: 0.6), value: showProfile)
                .ignoresSafeArea(.all)
            
            
            HomeView(showProfile: $showProfile, showContent: $showContent,viewState: viewState)
               
            //            .background(.white)
                
//                .padding(.top,60)
//                .edgesIgnoringSafeArea(.all)
            
            MenuView(showProfile: $showProfile)
                .environmentObject(user)
                .background(.black.opacity(0.001))
                .offset(y: showProfile ? 0 : screen.height)
                .offset(y:viewState.height)
                .animation(.spring(response: 0.5,dampingFraction: 0.6), value: showProfile)
                .onTapGesture {
                    showProfile.toggle()
                }
                .gesture(
                    DragGesture()
                        .onChanged({ value in
                            viewState = value.translation
                        })
                        .onEnded({ value in
                            if viewState.height > 50 {
                                showProfile.toggle()
                            }
                            viewState = .zero
                        })
                )
            
            if showContent {
                //                Color.white.ignoresSafeArea(.all)
                BlurView(style: .systemMaterial)
                    .ignoresSafeArea(.all)
                ContentView()
                VStack{
                    HStack{
                        Spacer()
                        Image(systemName: "xmark")
                            .frame(width: 36,height: 36)
                            .foregroundStyle(.white)
                            .background(.black)
                            .clipShape(Circle())
                    }
                    Spacer()
                }
                .padding(.trailing,16)
                .padding(.top,16)
                .transition(.move(edge: .top))
                .onTapGesture {
                    showContent = false
                }
            }
            
            
            if user.showLogin{
                ZStack {
                    LoginView()
                        .environmentObject(user)
                    HStack{
                        Spacer()
                        Image(systemName: "xmark")
                            .font(.system(size: 16,weight: .medium))
                            .frame(width: 36,height: 36)
                            .background(Color("background3"))
                            .clipShape(Circle())
                            .shadow(color:.black.opacity(0.1),radius: 1,x:0,y:1)
                            .shadow(color:.black.opacity(0.2),radius: 10,x:0,y:10)
                            .padding()
                            .onTapGesture {
                                user.showLogin.toggle()
                            }
                    }
                    .frame(maxHeight: .infinity,alignment: .top)
                }
                
                
            }
        }
    }
}

#Preview {
    Home()
    //        .environment(\.colorScheme, .dark)
        .environmentObject(UserStore())
}

struct AvatarView: View {
    @EnvironmentObject var user:UserStore
    @Binding var showProfile:Bool
    var body: some View {
        
        VStack {
            if user.isLogged {
                Button(action: {
                    showProfile.toggle()
                }){
                    Image("Avatar")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: 36,height: 36)
                        .clipShape(Circle())
                }
                
            }else{
                Button(action: {
                    user.showLogin.toggle()
                }){
                    Image(systemName: "person")
                        .font(.system(size: 16,weight: .medium))
                        .frame(width: 36,height: 36)
                        .background(Color("background3"))
                        .clipShape(Circle())
                        .shadow(color:.black.opacity(0.1),radius: 1,x:0,y:1)
                        .shadow(color:.black.opacity(0.2),radius: 10,x:0,y:10)
                }
            }
        }
        
    }
    
}

struct HomeBackgroundView: View {
    @Binding var showProfile:Bool
    var body: some View {
        VStack{
            LinearGradient(colors: [ Color("background2"), Color("background1")], startPoint: .top, endPoint: .bottom)
                .frame(height:200)
            Spacer()
        }
        .background(Color("background1"))
        .clipShape(RoundedRectangle(cornerRadius: showProfile ? 30 :0,style: .continuous))
        .shadow(color:Color.black.opacity(0.2),radius: 20,x:0,y:20)
    }
}
